<template>
  <div class="user-menu-list">
    <div style="margin-top: 35px">
      <div class="button-container">
        <el-button
          class="custom-button"
          circle
          size="large"
          @click="this.$router.push({ name: 'UserAppointment' })"
          ><template #icon>
            <img
              src="/images/arrange.png"
              alt="预约"
              class="custom-icon"
            /> </template
        ></el-button>
        <div class="button-title">预约挂号</div>
      </div>
      <div class="button-container">
        <el-button
          class="custom-button"
          circle
          size="large"
          @click="this.$router.push({ name: 'UserMyAppointments' })"
          ><template #icon>
            <img
              src="/images/records.png"
              alt="我的预约"
              class="custom-icon"
            /> </template
        ></el-button>
        <div class="button-title">我的预约</div>
      </div>
      <div class="button-container">
        <el-button
          class="custom-button"
          circle
          size="large"
          @click="this.$router.push({ name: 'UserPayment' })"
          ><template #icon>
            <img
              src="/images/pay.png"
              alt="支付"
              class="custom-icon"
            /> </template
        ></el-button>
        <div class="button-title">缴费</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserMenuList",
  data() {
    return {
      dialogVisible: false,
    };
  },
};
</script>

<style scoped>
.custom-button {
  width: 105px; /* 设置按钮宽度 */
  height: 105px; /* 设置按钮高度 */
  font-size: 24px; /* 设置按钮字体大小 */
  line-height: 80px; /* 设置按钮行高，使文本垂直居中 */
  border: none;
}

.button-container {
  margin: 35px; /* 设置按钮容器的外边距 */
  margin-top: 20vw;
}

.user-menu-list {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap; /* 如果按钮容器超过一行，自动换行 */
}
.custom-icon {
  width: 25vw; /* 设置图标宽度 */
  height: 25vw; /* 设置图标高度 */
}

.button-title {
  text-align: center; /* 设置文本居中 */
  font-size: 24px; /* 设置字体大小 */
  margin-top: 10px; /* 设置上外边距 */
}
</style>
